<template>
  <view class="settle">
    <image
      src="../../static/image/business/img_agent_add_2.png"
      mode="widthFix"
      class="settle__top"
    ></image>
    <view class="settle__tip">提供代理商个人银行卡</view>

    <view class="settle__upload">
      <DeliverFileUpload
        :maxCount="1"
        :width="700"
        @success="onSuccess"
        @remove="onRemove"
      ></DeliverFileUpload>
      <view class="tip"> 个人储蓄卡正面 </view>
    </view>

    <u-form :model="form" ref="uForm" class="settle__form">
      <u-form-item
        label="账号"
        label-width="200rpx"
        class="ml-20 mr-20 mt-20"
        bg-color="white"
      >
        <u-input
          v-model="form.accountNo"
          type="number"
          placeholder="请输入收款账户的账号"
        />
      </u-form-item>

      <u-form-item
        label="户名"
        label-width="200rpx"
        class="ml-20 mr-20"
        bg-color="white"
      >
        <u-input
          v-model="form.accountName"
          placeholder="请输入收款账户的户名"
        />
      </u-form-item>
      <u-form-item label="开户行" label-width="200rpx" class="ml-20 mr-20">
        <u-input
          v-model="form.bankName"
          type="select"
          placeholder="请选择开户行"
          @click="goBank()"
        />
      </u-form-item>
      <u-form-item label="开户行省市" label-width="200rpx" class="ml-20 mr-20">
        <city text="请选择开户城市" @success="selectCity"></city>
      </u-form-item>
      <u-form-item label="支行名称" label-width="200rpx" class="ml-20 mr-20">
        <u-input
          v-model="form.branchName"
          type="select"
          placeholder="请选择开户支行"
          @click="goBankBranch()"
        />
        <u-picker v-model="showSubBank" mode="region"></u-picker>
      </u-form-item>
      <u-form-item label="手机号" label-width="200rpx" class="ml-20 mr-20"
        ><u-input v-model="form.accountMobileNo" placeholder="银行预留手机号"
      /></u-form-item>
    </u-form>

    <u-button
      class="m-20"
      type="primary"
      :custom-style="customStyle"
      @click="submit()"
    >
      下一步
    </u-button>
  </view>
</template>

<script>
import city from '@/components/city/city.vue';
import DeliverFileUpload from '@/components/DeliverFileUpload/DeliverFileUpload.vue';
export default {
  components: {
    DeliverFileUpload,
    city,
  },
  data() {
    return {
      accountData: {},
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#9D60FF',
      },
      showBank: false,
      showCity: false,
      showSubBank: false,
      form: {
        accountImg: '',
        accountNo: '',
        accountName: '',
        bankName: '',
        bankCode: '',
        accountProvince: '',
        accountCity: '',
        accountArea: '',
        branchName: '',
        cnapsName: '', //同branchName
        cnapsNo: '', //branchCode
        accountMobileNo: '',
        accountType: '1', //1对私 2对公
      },
      cityList: [],
      city: '',
      fileList: [],
      ocrParam: {
        path: '',
        ocrType: 'BANK_CARD',
      },
      basicForm: {},
    };
  },
  onLoad(options) {
    this.basicForm = JSON.parse(options.basicForm);
    console.log('this.basicForm----->126', this.basicForm);
    this.querySetter();
  },
  mounted() {
    // this.basicForm = JSON.parse(decodeURIComponent(this.$route.query.basicForm));
    // this.querySetter();
  },
  methods: {
    onRemove(index) {
      this.fileList.splice(index, 1);
      this.form.accountImg = '';
      this.form.accountNo = '';
    },
    onSuccess(filePath) {
      this.fileList.push(filePath);
      this.form.accountImg = filePath;
      //ocr识别
      this.getOcrRead(filePath);
    },
    selectCity(Object) {
      console.log('Object=' + JSON.stringify(Object));
      this.form.accountProvince = Object.accountProvince;
      this.form.accountCity = Object.accountCity;
      this.form.accountArea = Object.accountArea;
    },
    getOcrRead(filePath) {
      const _that = this;
      _that.ocrParam.path = filePath;
      this.$zx.common_api.getOCRRead(this.ocrParam).then((data) => {
        console.log('querySetter----->156', data.result);
        if (data.result) {
          _that.form.accountNo = data.result.bank_card_number.replace(
            /\s+/g,
            ''
          );
        }
      });
    },
    // 查询结算卡
    querySetter() {
      const _that = this;
      this.$zx.user_api.querySetter().then((data) => {
        console.log('querySetter----->167', data);
        this.accountData = data;
        this.form.accountName = this.accountData.accountName;
      });
    },
    goBank() {
      const _that = this;
      uni.navigateTo({
        url: '/pages/bank/bankSelect',
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          acceptDataFromOpenedPage: (data) => {
            console.log('acceptDataFromOpenedPage----->181', data);
            _that.form.bankName = data.data.name;
            _that.form.bankCode = data.data.code;
          },
        },
        success: (res) => {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('acceptDataFromOpenerPage', {
            data: 'data from starter page',
          });
        },
      });
    },
    goBankBranch() {
      const _that = this;
      if (!_that.form.bankCode) {
        uni.$zx.msg('请先选择开户行', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.accountProvince) {
        uni.$zx.msg('请先选择开户城市', {
          duration: 4000,
        });
        return;
      }
      uni.navigateTo({
        url:
          '/pages/bank/bankBranchSelect?province=' +
          _that.form.accountProvince +
          '&city=' +
          _that.form.accountCity +
          '&bankCode=' +
          _that.form.bankCode,
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          acceptDataFromOpenedPage: (data) => {
            console.log('acceptDataFromOpenedPage----->219', data);
            _that.form.branchName = data.data.name;
            _that.form.cnapsNo = data.data.code;
          },
        },
        success: (res) => {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('acceptDataFromOpenerPage', {
            data: 'data from starter page',
          });
        },
      });
    },

    submit() {
      const _that = this;
      if (_that.form.accountImg == 0) {
        uni.$zx.msg('请上传银行照片', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.accountNo) {
        uni.$zx.msg('请输入银行卡号', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.bankCode) {
        uni.$zx.msg('请选择开户行', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.accountProvince) {
        uni.$zx.msg('请选择开户城市', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.branchName) {
        uni.$zx.msg('请选择开户支行', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.accountMobileNo) {
        uni.$zx.msg('请输入银行预留手机号', {
          duration: 4000,
        });
        return;
      }
      console.log('this.form----->272', this.form);
      this.$u.route({
        url: 'pages/business/addPersonThird',
        params: {
          basicForm: JSON.stringify(_that.basicForm),
          settleForm: JSON.stringify(_that.form),
          // basicForm: encodeURIComponent(JSON.stringify(_that.basicForm)),
          // settleForm: encodeURIComponent(JSON.stringify(_that.form)),
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.settle {
  &__top {
    width: 100%;
  }

  &__tip {
    background-color: #f6f6f6;
    height: 70rpx;
    line-height: 70rpx;
    padding: 0 20rpx;
    font-size: 12px;
  }

  &__form {
    background-color: white;
  }

  &__upload {
    background-color: white;
    padding: 20rpx;
  }
}

.tip {
  text-align: center;
}
</style>
